<template>
  <div class="wx-g6">
    <iu-header border>
      <template #left>
        <img src="../../styles/logo.svg" alt="" style="width:40px" />
        <span>{{ curMenu.name }}</span>
      </template>
      <template #title></template>
      <template #right>
        <div  @click="backToHomepage"  v-focusable><iconSvg name="home" w="20px" h="22px" class="right_icon" ></iconSvg></div>
      </template>
    </iu-header>
    <Application> </Application>
    <div v-if="curMenu.name && !applicationList.length" style="color: #fff;text-align: center;font-size: 16px;">未配置模块</div>
    <div class="iframe-area" ref="fullscreen" :class="{ fullscreen: fullscreen, 'horizontal-screen': horizontalscreen }">
      <div class="full" v-if="fullscreen || horizontalscreen" @click="eventFullscreen(0)">
        <iconSvg name="fullscreen" w="25" style="color:#fff"></iconSvg>
      </div>
      <div class="full" v-else @click.stop="eventHorizontalscreen(1)">
        <iconSvg name="horizontalscreen" w="25" style="color:#fff"></iconSvg>
      </div>
      <div v-if="iframeSrc" style="width: 100%;height: 100%;">
        <object type="text/html" :data="iframeSrc" width="100%" height="100%"></object>
      </div>
    </div>
  </div>
</template>
<script>
import { TransferDomDirective as TransferDom } from 'vux';
import ApplicationDao from '@/daos/application';
import iuHeader from '@/components/common/header/index';
import Application from '@/components/common/application';
import hostConfig from '@/config/host';
import Cookies from 'js-cookie';
export default {
  name: 'g6',
  directives: {
    TransferDom,
  },
  data() {
    return {
      mouseOffset: 0,
      moduleId: '',
      stop: false,
      fullscreen: false,
      horizontalscreen: false,
      moduleManageId: '25',
      cloudList: [],
      filterForm: {
        nav: 2,
        name: '',
        show: false,
      },
      iframeSrc: '',
      activeIndex: 0,
      domain: '',
    };
  },
  components: {
    iuHeader,
    Application,
  },
  inject: ['backToHomepage', 'backToG6page'],
  created() {
    const { moduleId } = this.$route.query;
    this.moduleId = moduleId;

    this.domain = location.hostname
      .split('.')
      .slice(1)
      .join('.');
  },
  computed: {
    curCloud() {
      return this.cloudList[this.activeIndex];
    },
    appMenuList() {
      return this.$store.state.appMenuList;
    },
    application() {
      return this.$store.state.application;
    },
    applicationList() {
      return this.$store.state.applicationList;
    },
    curMenu() {
      let result = this.appMenuList.find((e) => e.id === this.moduleId);
      return result || {};
    },
  },
  watch: {
    applicationList() {
      const { cid } = this.$route.query;
      if (this.curMenu && this.curMenu.labelType && this.applicationList.length && !cid) {
        this.handleCloudChange(this.applicationList[0]);
      } else {
        const item = this.applicationList.find((e) => e.cloudPageId === cid);
        if (item) {
          this.handleCloudChange(item);
        }
      }
    },
  },
  methods: {
    eventFullscreen(tag) {
      this.fullscreen = !!tag;
      this.filterForm.show = false;
      Cookies.set('g6horizontal', !!tag, { domain: this.domain });
      this.horizontalscreen = false;
    },
    eventHorizontalscreen(tag) {
      Cookies.set('g6horizontal', !!tag, { domain: this.domain });
      this.horizontalscreen = !!tag;
    },
    getCloudList() {
      ApplicationDao.getModuleCloudConfig(
        { moduleManageId: this.application.moduleId },
        (res) => {
          this.cloudList.splice(0);
          this.cloudList = res.data;
          if (this.cloudList[0]) {
            this.eventCloudChange(this.cloudList[0]);
          }
        },
        true
      );
    },
    eventCloudChange(item, index = 0) {
      this.activeIndex = index;
      this.handleCloudChange(item);
    },
    handleCloudChange(item, page = 0) {
      this.iframeSrc = '';
      if (item.cloudPageType === 0) {
        this.$nextTick(() => {
          this.iframeSrc = `${hostConfig.ccUrl}/#${item.showUrl}`;
        });
      } else {
        const searchParams = new URLSearchParams();
        const token = Cookies.get('GSESSIONID');
        searchParams.append('ssoToken', token);
        searchParams.append('ssoDomain', location.origin);
        this.$nextTick(() => {
          this.iframeSrc = `${hostConfig.deviceUrl}/#${item.showUrl}&${searchParams.toString()}`;
        });
      }
    },
    eventTitleClick() {
      this.filterForm.show = true;
    },
    handleFilter(item, index) {
      this.eventCloudChange(item, index);
    },
  },
};
</script>
<style lang="less" scoped>
.wx-g6 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #22233f;

  .iframe-area {
    // min-height: calc(~'100vh - 78px');
    height: calc(~'100vh - 78px');
    // height: 100%;
    position: relative;
    background-color: #18182c;

    &.fullscreen {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      height: 100vh;
    }

    .full {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0.5;
      padding: 5px;
      background-color: #22223c;
    }
  }

  iframe {
    margin: 0;
    padding: 0;
  }

  .horizontal-screen {
    background-color: #23233d;
    width: 100vh;
    height: 100vw;
    position: fixed;
    top: -100vw;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 19999999;
    transform: rotate(90deg);
    transform-origin: bottom left;
    background-color: #23233d;
  }
}
</style>

<style lang="less"></style>
